Vue 環境変数 env

※古い記事でメンテしていないので、話半分で参考にしてください。

vue-cliを用いる時の話

webpackのラッパー

.envファイルにVUE_APP_HOGEの形で、環境変数記入

code:.env

VUE_APP_HOST=localhost

VUE_APP_API_URL_BASE='https://sample/api';

用意ファイル

.env 共通用の環境変数を書く

.env.development 開発環境用の環境変数を書く

.env.production ...

.env.hoge.local

localは、gitに入れないやつ

gitに入れないやつは、exampleファイル用意する

code:package.json

"scripts":{

"serve:dev": "vue-cli-service serve --mode development"

"build:dev": "vue-cli-service build --mode development"

}

設定に環境変数を追加する

困りごと

.envで設定したが、APIのURL Uniform Resource Locatorsがうまく入らない

.envではなく、.env.developmentなど用意して、modeつけてserveするとうまくいった。

参考